<template>
    <div class="app-container">
        <div class="customContainer"> 
            <div class="title">退货单详情</div>
            <div class="order_title"> 
                <span>退货单信息</span>
                <router-link :to="{name:'warehouse/rtODetail',params :{routerflag:3,id,store_id:info.store_id,order_no:info.order_id,type_num:info.species_num,num:info.all_num,money:info.all_money,status:info.status,type:info.type}}">
                    <el-button type="primary" size="mini">订单明细</el-button>
                </router-link>
            </div>
            <div class="order_info bor_bot_n">
                <el-row>
                    <el-col :span="8"><div class="info_item"><div class="tag">退货单号：</div><div>{{info.order_id}}</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">创建时间：</div><div>{{info.create_time}}</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">退货状态：</div><div>{{info.status|rOrderStatus(1)}}</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">创建人：</div><div>{{info.clerk_s}}</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">退货方：</div><div>{{info.return_name}}</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">退货渠道：</div><div>{{info.type_name}}</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">退货种类：</div><div>{{info.species_num}} (种)</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">退货数量：</div><div>{{info.all_num}} (个)</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">退货金额：</div><div>{{info.all_money}} (元)</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">实收种类：</div><div>{{info.arrive_species_num}} (种)</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">实收数量：</div><div>{{info.arrive_num}} (个)</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">实收金额：</div><div>{{info.arrive_money}} (元)</div></div></el-col>
                    <el-col :span="8" v-show="info.type==1"><div class="info_item"><div class="tag">约定退款金额：</div><div v-show="info.appoint_money">{{info.appoint_money}} (元)</div></div></el-col>
                </el-row> 
                <div class="info_bot">
                    <div class="tag">退货单备注：</div><div class="remark">
                        <!-- <div v-show="info.gift_remark" style="margin-bottom:15px">{{info.gift_remark}}</div> -->
                        <div>{{info.remark}}</div>
                    </div>
                </div>
            </div>
            <div class="order_title">收货信息</div>
            <div class="rece_info bor_bot_n">
                <el-row>
                    <el-col :span="8"><div class="info_item store info_bot" :class="{mb_0:info.type==1}"><div class="tag">收货方：</div><div class="remark">{{info.receive_name}}</div></div></el-col>
                    <el-col :span="8" v-show="info.type==1"><div class="info_item mb_0"><div class="tag">编号：</div><div>{{info.serial_number}}</div></div></el-col>
                </el-row> 
                <el-row v-show="info.type==2">
                    <el-col :span="8"><div class="info_item"><div class="tag">收货人：</div><div>{{info.man_name}}</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">电话：</div><div>{{info.phone}}</div></div></el-col>
                    <el-col :span="8"><div class="info_item"><div class="tag">地区：</div><div>{{info.prov_name}} / {{info.city_name}} / {{info.dist_name}}</div></div></el-col>
                </el-row> 
                <div class="info_bot" v-show="info.type==2">
                    <div class="tag">地址：</div><div class="remark"><div>{{info.address}}</div></div>
                </div>                                            
            </div>
            <div class="order_title">最近操作</div>
            <div class="action_info">
                <div class="info_bot" style="margin-left:23px">{{info.link_info.create_time}} {{info.link_info.clerk_s}} {{info.link_info.status|rOrderStatus(2)}}</div>
                <div v-show="info.link_info.remark" style="margin-top:10px" class="info_bot"><div class="tag">审批意见：</div><div class="remark big">{{info.link_info.remark}}</div></div>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        getInfo,
    } from "@/api/warehouse/rtOInfo";
    export default {
        data() {
            return {
                info:{link_info:{}},
                pLinks:[],
                id:"",
                isStore:false,
                formInline:{
                    id:"",
                },
            };
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                if(vm.$route.params.routerflag){
                    vm.formInline.id=vm.$route.params.id;
                    vm.fatchData()
                }
            })
        },
        methods: {
            fatchData(){
                this.id="";
                this.info={link_info:{}};
                getInfo(this.formInline).then(res=>{
                    if(res.code==1){
                        this.id=this.formInline.id;
                        res.data.all_money=(res.data.all_money/1).toFixed(2);
                        res.data.appoint_money=res.data.appoint_money?(res.data.appoint_money/1).toFixed(2):'';
                        res.data.type_name=res.data.type==1?"退供应商":"退中央仓";
                        if(res.data.status&&res.data.status*1>=50){
                            res.data.arrive_money=(res.data.arrive_money/1).toFixed(2);
                        }else if(res.data.type==1&&res.data.status==20){
                            res.data.arrive_money=res.data.all_money;
                            res.data.arrive_num=res.data.all_num;
                            res.data.arrive_species_num=res.data.species_num;
                        }else{
                            res.data.arrive_money="0.00";
                            res.data.arrive_num=0;
                            res.data.arrive_species_num=0;
                        }
                        this.info=res.data;
                    }
                })
            },
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .customContainer{
        overflow-y: auto;
    }
    .title{
        font-size: 20px;
        margin-bottom: 20px;
        font-weight: bold;
    }
    .order_info,.rece_info,.action_info{
        background: #fff;
        padding: 20px 5px;
        border: 1px solid #dcdfe6;
        .info_item{
            display: inline-block;
            width: 400px;
            margin-bottom: 20px;
            div{
                display: inline-block;
                color: #333;
            }
            .tag{
                width: 120px;
                color: #838383;
                text-align: right;
                margin-right: 10px;
            }
            .store{
                position: relative;
                .name{
                    position: relative;
                    top: 0px;
                    left: 0px;
                }
            }
        }
        .info_bot{
            color: #333;
            div.remark{
                display: inline-block; 
                width: calc(100% - 150px);                   
                div{
                    word-wrap: break-word; 
                }
            }
            div.remark.big{
                min-height: 70px;
            }
            div{
                color: #333;
            }
            .tag{
                color: #838383;
                display: inline-block;
                width: 120px;
                text-align: right;
                vertical-align: top;
                margin-right: 10px;
            }
        }
    }
    .rece_info,.action_info{
        padding: 30px 5px;
    }
    .order_title{
        padding: 0px 20px;
        font-size: 18px;
        height: 48px;
        color: #97999d;
        background: #f5f7fa;
        border: 1px solid #dcdfe6;
        border-bottom: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .bor_bot_n{
        border-bottom: none;
    }
    .bor_top_n{
        border-top: none;
    }
    .mb_0{
        margin-bottom: 0px !important;
    }
</style>